<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RollCall</title>
    <script src="webjars/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>
    table {
        border-spacing: 0px;
        margin: 10% auto;
        width: 500px;
    }

    td {
        width: 100px;
        height: 50px;
        border: 1px solid black;
        text-align: center;
    }

    .tr2 > td {
        background: red;
    }
</style>
<body>
<table id="table1">
    <caption><h1>点名系统</h1></caption>
    <tr>
        <td colspan="2">
            <button id="btn1">开始</button>
        </td>
        <td>
            <button id="btn2">重置</button>
        </td>
        <td colspan="2">
            <button id="btn3">停止</button>
        </td>
    </tr>
</table>
<table id="table2">
    <caption><h1>以被点名的名单</h1></caption>
</table>
</body>
<script>




    find();
    var count = 0;
    var idNum = 0;
    var interval;
    var flag = true;

    function find() {
        $(".tr1").empty();
        $.post(
            "RollCall",
            {
                method: "findAllName"
            },
            function (resp) {
                var i = 0;
                while (resp[i] != undefined) {
                    var tr =
                        "<tr class='tr1'>" +
                        "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                        "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                        "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                        "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                        "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                        "</tr>";
                    $("#table1").append(tr);
                }
                count = i;
            },
            'json'
        )
    }

    function show() {
        $.post(
            "RollCall",
            {
                method: "beforeRollCall"
            },
            function (resp) {
                $(".tr1").empty();
                var i = 0;
                while (resp[i] != undefined) {
                    var tr =
                        "<tr class='tr1'>" +
                        "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                        "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                        "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                        "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                        "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                        "</tr>";
                    $("#table1").append(tr);
                }
            },
            'json'
        );
    }

    function randomName() {
        $("#td" + idNum).css("background-color", "white");
        idNum = parseInt(Math.random() * count);
        $("#td" + idNum).css("background-color", "red");
    }

    $("#btn1").click(
        function () {
            if (flag) {
                interval = setInterval(function () {
                    randomName()
                }, 30);
            }
            flag = false;
        }
    );
    $("#btn3").click(
        function () {
            clearInterval(interval);
            flag = true;
            $.post(
                "RollCall",
                {
                    method: "afterRollCall",
                    id: idNum
                },
                function (resp) {
                    $(".tr2").empty();
                    var i = 0;
                    while (resp[i] != undefined) {
                        var tr =
                            "<tr class='tr2'>" +
                            "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                            "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                            "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                            "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                            "<td id='td" + i + "'>" + (resp[i] == undefined ? "空位" : resp[i++]) + "</td>" +
                            "</tr>";
                        $("#table2").append(tr);
                    }
                    show();
                },
                'json'
            );
        }
    )
    $("#btn2").click(
        function () {
            $.post(
                "RollCall",
                {
                    method: "resetList"
                },
                function (resp) {
                    $(".tr2").empty();
                    find();
                },
                'text'
            );
        }
    );
</script>
</html>